import React, { Component } from "react";
import { Icon } from "react-vant";
import IMG from "../images/header.png";
import IMGVIP from "../images/vip.png";
import DOCTOR from "../images/我的医生.png";
import FACILITY from "../images/我的设备.png";
import PLAN from "../images/健康计划.png";
import APPRAISAL from "../images/健康测评.png";
import MATERNAL from "../images/姨妈助手.png";
import COLLECT from "../images/我的收藏.png";
import SERVICE from "../images/春雨客服.png";
import RECOMMEND from "../images/有奖推荐.png";
import ABOUT from "../images/关于春雨医生.png";
import { Carousel } from "antd";

export default class My extends Component {
  //采用三段式布局完成显示隐藏
  state = {
    // username: localStorage.getItem("username"),
    token: localStorage.getItem("token"),
    img: localStorage.getItem("img") || IMG,
    username: localStorage.getItem("username") || "登陆与注册",
    isShow: false,
  };

  componentDidMount() {
    if (this.state.token) {
      this.setState({
        isShow: (this.state.isShow = true),
      });
    }
  }

  //跳到登录页
  goLogin = () => {
    this.props.history.push("/login");
  };

  //退出登录
  exit = () => {
    localStorage.clear();
    this.props.history.go(0);
  };

  //跳转到新建档案
  getNew() {
    this.props.history.push("/record");
  }

  //跳转到我的医生页面
  goDoctor() {
    this.props.history.push("/doctor");
  }

  render() {
    const contentStyle = {
      background: "rgb(245,245,245)",
      margin: "0 20px",
      textAlign: "center",
    };
    const { img, username, isShow } = this.state;
    return (
      <div className="my">
        <div className="header">
          <span></span>
          <span>
            <Icon name="setting-o" size="20" />
            <Icon name="chat-o" size="20" />
          </span>
        </div>
        <div className="content">
          <dl>
            <dt>
              <img src={img} alt="" />
            </dt>
            <dd>
              <p onClick={() => this.goLogin()}>{username}</p>
              <p>
                账户管理
                <Icon name="arrow" />
              </p>
            </dd>
          </dl>
          <img src={IMGVIP} alt="" className="vip" />
          <div className="info">
            <div>
              <span>0.00</span>
              <span>账户余额(元)</span>
            </div>
            <div>
              <span>0</span>
              <span>优惠券(张)</span>
            </div>
            <div>
              <span>0</span>
              <span>金币</span>
            </div>
          </div>
          {isShow === true ? (
            <div className="melist">
              <h3>健康档案</h3>
              <div>
                <Carousel>
                  <div>
                    <h3 style={contentStyle}>
                      <div className="mecarousel">
                        <span>
                          <p className="mename">测试名字</p>
                          <p>男</p>
                        </span>
                        <div>查看档案</div>
                      </div>
                    </h3>
                  </div>
                  <div>
                    <h3 style={contentStyle}>
                      <div className="mebutton">
                        <h6 onClick={() => this.getNew()}>+新建档案</h6>
                        <p>请添加健康档案，进行档案管理</p>
                      </div>
                    </h3>
                  </div>
                </Carousel>
              </div>
            </div>
          ) : (
            ""
          )}
          <div className="service">
            <p>工具与服务</p>
            <div className="menu">
              <dl onClick={() => this.goDoctor()}>
                <dt>
                  <img src={DOCTOR} alt="" />
                </dt>
                <dd>我的医生</dd>
              </dl>
              <dl>
                <dt>
                  <img src={FACILITY} alt="" />
                </dt>
                <dd>我的设备</dd>
              </dl>
              <dl>
                <dt>
                  <img src={PLAN} alt="" />
                </dt>
                <dd>健康计划</dd>
              </dl>
              <dl>
                <dt>
                  <img src={APPRAISAL} alt="" />
                </dt>
                <dd>健康测评</dd>
              </dl>
              <dl>
                <dt>
                  <img src={MATERNAL} alt="" />
                </dt>
                <dd>姨妈助手</dd>
              </dl>
              <dl>
                <dt>
                  <img src={COLLECT} alt="" />
                </dt>
                <dd>我的收藏</dd>
              </dl>
              <dl>
                <dt>
                  <img src={SERVICE} alt="" />
                </dt>
                <dd>美洽客服</dd>
              </dl>
              <dl>
                <dt>
                  <img src={RECOMMEND} alt="" />
                </dt>
                <dd>有奖推荐</dd>
              </dl>
              <dl>
                <dt>
                  <img src={ABOUT} alt="" />
                </dt>
                <dd>关于春雨医生</dd>
              </dl>
            </div>
          </div>
          {isShow === true ? (
            <button className="btn" onClick={() => this.exit()}>
              退出登录
            </button>
          ) : (
            ""
          )}
        </div>
      </div>
    );
  }
}
